@import "../../../assets/css/global";

.detail-container {
  width: 100%;

  .code-content {
    width: 100%;
    height: 428px;
    background: url('https://cdn.ibrand.cc/coupon-detial.png') no-repeat;
    background-size: 100% 428px;
    padding: 17px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    text-align: center;

    .code-top {
      .avatar {
        width: 58px;
        height: 58px;
        overflow: hidden;
        border-radius: 100%;
        border: 2px solid #FFFFFF;
      }

      .detail-title {
        font-size: 18px;
        color: #FFFFFF;
      }

    }

    .code-img {
      position: relative;
      width: 190px;
      height: 190px;
      background: #fff;
      border: 2px solid #999999;
      margin: 0 auto;
      image{
        width: 100%;
      }
      .logo {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        width: 40px;
        height: 40px;
      }
    }

    .code-bottom {
      .detail-one {
        font-size: 20px;
        color: #FFFFFF;
        font-weight: bold;
      }

      .detail-date {
        font-size: 12px;
        color: #FFFFFF;
      }
    }

  }

  .coupon-explain {
    width: 100%;
    padding: 10px 32px;

    .title-box {
      text-align: center;
      margin-top: 13px;

      image {
        width: 100%;
      }
      .title-line {
        height: 1px;
        width: 100%;
        background: #CCCCCC;
      }

      .title {
        position: relative;
        display: inline-block;
        top: -13px;
        font-size: 14px;
        color: #5B5B5B;
        background: #F3F3F3;
        padding: 0px 10px;
      }

    }

    .explain-detail {
      font-size: 12px;
      color: #999999;
      line-height: 2.5;
      margin-top: 15px;
    }
  }
}
